<template>
  <div v-if="detailAuth">
    <!-- 头部 -->
    <page-header :title="$t('m.Push_details')">
      <el-button type="primary" @click="editMsg" v-if="editAuth">
        {{
          detailData.state == 0 ? this.$t('m.branch_Edit') : this.$t('m.Copy')
        }}
      </el-button>
    </page-header>
    <div class="detail_div container">
      <div class="detail_left">
        <div class="detail_left_div">
          <div class="detail_title">
            <div style=" display: flex;align-items: center;">
              <span style="font-size: 16px;">
                {{ $t('m.Push_information') }}</span
              >
              <div
                class="detail_state"
                :style="detailData.state | valFormat(optionsState, 1)"
              >
                <span
                  class="detail_state_dot"
                  :style="detailData.state | valFormat(optionsState2, 1)"
                ></span>
                <span class="detail_state_text">{{
                  detailData.state | valFormat(optionsState)
                }}</span>
              </div>
            </div>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Push_name') }}: </span>
            <span class="detail_text2">{{
              detailData.sendName | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Push_time') }}: </span>
            <span class="detail_text2">{{
              detailData.sendTime | dateformat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Push_users') }}: </span>
            <span class="detail_text2">{{
              detailData.sendType | stateFormat(sendTypeType)
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Push_title') }}: </span>
            <span class="detail_text2">{{
              detailData.sendTitle | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Push_content') }}: </span>
            <span class="detail_text2">{{
              detailData.sendElement | strFormat
            }}</span>
          </div>
          <div
            class="detail_text"
            :style="detailData.image ? 'display: flex;align-items: start;' : ''"
          >
            <span>{{ $t('m.program_img') }}: </span>
            <el-image
              class="upload-img"
              v-if="detailData.image"
              fit="cover"
              :src="fileUrlFormat(detailData.image)"
              :preview-src-list="[fileUrlFormat(detailData.image)]"
            >
            </el-image>
            <span class="detail_text2" v-else>{{
              detailData.image | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.branch_Creationdate') }}: </span>
            <span class="detail_text2">{{
              detailData.createTime | dateformat
            }}</span>
          </div>
        </div>
      </div>
      <div class="detail_right">
        <div class="detail_left_div" style="padding-bottom:20px">
          <div class="detail_title">
            {{ $t('m.Push_record') }}
          </div>
          <div class="el_table_div" style="padding: 0px;">
            <el-table :data="page.records">
              <emptydata
                slot="empty"
                v-if="!page.records || page.records.length == 0"
              />

              <el-table-column :label="$t('m.Number_push_users')">
                <template slot-scope="scope">
                  <div>{{ scope.row.sendNum | strFormat }}</div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.Push_time')">
                <template slot-scope="scope">
                  <div>{{ scope.row.pushTime | dateformat }}</div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <pagination
              :total="page.total"
              :current="page.current"
              :size="page.size"
              layout="total, prev, pager, next"
              @changePageSize="changePageSize"
              @changePageNum="changePageNum"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pagination from '@/components/pagination.vue'
import page from '@/mixins/page'
export default {
  components: { pagination },
  mixins: [page],
  data () {
    return {
      detailData: {
        createTime: '', //	创建时间
        id: '', //	消息id
        image: '', //	图片
        sendElement: '', //	推送内容
        sendMethod: '', //	发送方式 1-立即发送 2-指定时间推送
        sendName: '', //	推送名称
        sendTime: '', //	推送时间
        sendTitle: '', //	消息标题
        sendType: '', //	接收范围: 0-全部用户；1-指定用户；2-指定用户组
        state: '', //	推送状态 0-待推送 1-已推送
        userGroupType: '' //	指定用户组类型: 0-访问未租借；1-近期租借过；2-曾经活跃用户；3-24小时待支付订单用户
      },
      sendTypeType: [
        { value: 0, label: this.$t('m.All_users') },
        { value: 1, label: this.$t('m.Specify_user') },
        { value: 2, label: this.$t('m.Specify_user_group') }
      ],
      optionsState: [
        {
          value: '0',
          color: 'background: #fff7e7;',
          label: this.$t('m.To_be_pushed')
        },
        {
          value: '1',
          color: 'background: #e6fbee;',
          label: this.$t('m.Pushed')
        }
      ],
      optionsState2: [
        {
          value: '0',
          color: 'background: #FFC855;'
        },
        {
          value: '1',
          color: 'background: #4CE48A;'
        }
      ],
      detailAuth: this.permissionsId(221),
      editAuth: this.permissionsId(157) 
    }
  },
  created () {
    if (!this.detailAuth) {
      return
    }
    this.page = this.$options.data.call(this).page
    this.getDetail()
    this.getPage()
  },
  methods: {
    getDetail () {
      this.$api.messagePush
        .getMsgDetail({ id: this.$route.query.id })
        .then(res => {
          if (this.$ok(res)) {
            this.detailData = res.data
          }
        })
    },
    getPage () {
      this.$api.messagePush
        .getMsgRecord({ id: this.$route.query.id }, this.page)
        .then(res => {
          if (this.$ok(res)) {
            this.page = res.data
          }
        })
    },

    //编辑、复制
    editMsg () {
      let params = {
        state: this.detailData.state,
        id: this.detailData.id
      }
      this.$router.push({
        path: '/settings/message-push/cm',
        query: { params: JSON.stringify(params) }
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
